<template>
  <div id="news">

    <!--  可以使用 $route.params.id 获取传递的过来参数   -->
    <p>新闻页面, 新闻的id：{{$route.params.id }}</p>
  </div>
</template>

<script setup>
// 引入 useRouter
import {useRoute} from 'vue-router';
import {onMounted, onUnmounted, onActivated, onDeactivated} from 'vue';

onMounted( () => {
  console.log("News ----> onMounted");
});

// 这里不会被调用到
onUnmounted( () => {
  console.log("News ----> onUnmounted");
});

// 当组件被 keep alive 包裹之后，路由在被激活的时候调用
onActivated( () => {
  console.log("News ----> onActivated");
});

// 当组件被 keep alive 包裹之后，路由在离开的时候调用
onDeactivated( ()=> {
  console.log("News ----> onDeactivated");
});


// 获取 route 对象
// const route = useRoute();
// 通过 route 获取传入的参数
// const newId = route.params.id;
// console.log(newId);
// console.log(route.params);
</script>

<style scoped>
#news{
  width: 400px;
  height: 500px;
  background-color: darkgrey;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
